<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid red;"></canvas>
		<script type="text/javascript">
			function du(e) {
				return e * Math.PI / 180
			}
			var canvas = document.getElementById('canvas');
			var cxt = canvas.getContext("2d");
			canvas.width = 550;
			canvas.height = 400;
			
			//绘制描边半圆
			cxt.beginPath()
			cxt.arc(80, 80, 50, 0, du(180), true);
			cxt.closePath();
			cxt.strokeStyle = 'blueviolet'
			cxt.stroke()
			
			//绘制描边半圆圆弧
			cxt.beginPath()
			cxt.arc(80, 150, 50, 0, du(180), true);
			cxt.strokeStyle = 'aqua'
			cxt.stroke()
			
			//绘制填充半圆
			cxt.beginPath()
			cxt.arc(200, 80, 50, 0, du(360), true);
			cxt.closePath();
			cxt.fillStyle = 'lightblue'
			cxt.fill()
			
			//绘制填充半圆圆弧
			cxt.beginPath()
			cxt.arc(200, 150, 50, 0, du(180), true);
			cxt.fillStyle = 'rosybrown'
			cxt.fill()
			
		</script>
	</body>
</html>
